<template>
    <div class="login-page">
      <div class="top-bar">
        <el-icon class="logo-icon">
          <img src="../assets/icon/LOGO.png" alt="Logo" />
        </el-icon>
        <div class="logo-text">红星党建平台</div>
      </div>
  
      <div class="main-content">
        <img class="side-image" src="../assets/bac/Login-bac.jpg" alt="Login Background" />
  
        <el-card class="auth-card">
          <div class="card-icon">
            <el-icon><UserFilled /></el-icon>
          </div>
  
          <el-form v-if="!showRegister" :model="loginForm" :rules="loginRules" ref="loginForm">
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" placeholder="用户名">
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                :type="passwordVisible ? 'text' : 'password'"
                placeholder="密码">
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
                <template #suffix>
                  <el-icon @click="togglePasswordVisibility" style="cursor: pointer;">
                    <View v-if="!passwordVisible" />
                    <Hide v-else />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
  
            <el-form-item class="form-buttons">
              <el-button type="primary" @click="login">登录</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
  
            <div class="register-link">
              <span @click="toggleRegister">还没有账户？去注册 →</span>
            </div>
          </el-form>
  
          <el-form v-else :model="registerForm" :rules="registerRules" ref="registerForm">
            <el-form-item prop="username">
              <el-input v-model="registerForm.username" placeholder="用户名">
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="registerForm.password" type="password" placeholder="密码">
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="userphone">
              <el-input v-model="registerForm.userphone" placeholder="手机号">
                <template #prefix>
                  <el-icon><Phone /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="idCard">
              <el-input v-model="registerForm.idCard" placeholder="身份证号">
                <template #prefix>
                  <el-icon><IDCard /></el-icon>
                </template>
              </el-input>
            </el-form-item>
  
            <el-form-item>
              <el-button type="primary" @click="register" style="width: 350px;">注册</el-button>
            </el-form-item>
            <div class="login-link">
              <span @click="toggleRegister">已有账户？去登录 ←</span>
            </div>
          </el-form>
        </el-card>
      </div>
  
      <div class="bottom-bar">
        © 版权信息
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  import { User, Lock, UserFilled, Phone, IDCard } from '@element-plus/icons-vue';
  import { View, Hide } from '@element-plus/icons-vue';
  import tokenStore from '@/stores/token'; // 导入 tokenStore
  
  export default {
    components: {
      User,
      Lock,
      UserFilled,
      Phone,
      IDCard,
      View,
      Hide
    },
    data() {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        registerForm: {
          username: '',
          password: '',
          userphone: '',
          idCard: ''
        },
        showRegister: false,
        passwordVisible: false,
        loginRules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 5, max: 16, message: '用户名长度在5到16位之间', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 5, max: 16, message: '密码长度在5到16位之间', trigger: 'blur' }
          ]
        },
        registerRules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 5, max: 16, message: '用户名长度在5到16位之间', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 5, max: 16, message: '密码长度在5到16位之间', trigger: 'blur' }
          ],
          userphone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { len: 11, message: '手机号长度为11位', trigger: 'blur' },
          ],
          idCard: [
            { required: true, message: '请输入身份证号', trigger: 'blur' },
            { len: 18, message: '身份证号长度为18位', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      togglePasswordVisibility() {
        this.passwordVisible = !this.passwordVisible;
      },
      async login() {
        this.$refs.loginForm.validate(async (valid) => {
          if (valid) {
            try {
              const response = await axios.post('/user/login', {
                username: this.loginForm.username,
                password: this.loginForm.password
              });
              const { success, token } = response.data;
  
              if (success) {
                tokenStore.setToken(token); // 使用 tokenStore 存储 token
                this.$message.success('登录成功');
                this.$router.push('/user/home');
              } else {
                this.$message.error('登录失败，请检查用户名或密码');
              }
            } catch (error) {
              console.error(error);
              this.$message.error('登录请求失败');
            }
          }
        });
      },
      async register() {
        this.$refs.registerForm.validate(async (valid) => {
          if (valid) {
            try {
              const response = await axios.post('/user/register', {
                username: this.registerForm.username,
                password: this.registerForm.password,
                userphone: this.registerForm.userphone,
                idCard: this.registerForm.idCard
              });
              const { success, message } = response.data;
  
              if (success) {
                this.$message.success('注册成功，转到登录界面');
                this.toggleRegister();
                this.resetForm();
              } else {
                this.$message.error(`注册失败: ${message}`);
              }
            } catch (error) {
              console.error(error);
              this.$message.error('注册请求失败');
            }
          }
        });
      },
      toggleRegister() {
        this.showRegister = !this.showRegister;
      },
      resetForm() {
        if (this.showRegister && this.$refs.registerForm) {
          this.$refs.registerForm.resetFields();
        } else if (!this.showRegister && this.$refs.loginForm) {
          this.$refs.loginForm.resetFields();
        }
      }
    },
  };
  </script>
  
  <style lang="scss" scoped src="../styles/LoginPage.scss">
  /* Your styles here */
  </style>
  